<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>停车记录查询</span>
      </div>
      
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="车牌号或业主姓名">
          <el-input v-model="searchForm.plateNumber" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        
        
        <el-form-item>
          <el-button type="primary" @click="searchRecords">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="plateNumber" label="车牌号" align="center" />
        <el-table-column label="车辆类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.vehicleType === 1 ? '月租车' : '临时车' }}
          </template>
        </el-table-column>
        <el-table-column prop="ownerName" label="车主" align="center" />
        <el-table-column prop="ownerPhone" label="手机号" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '在场' : '离场' }}
          </template>
        </el-table-column>
        <el-table-column label="入场时间" align="center">
          <template slot-scope="scope">
            {{ formatDate(scope.row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column label="出场时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.endTime ? formatDate(scope.row.endTime) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ParkingRecord',
  data() {
    return {
      // 搜索表单
      searchForm: {
        plateNumber: '',
        vehicleType: null,
        status: null,
        startTimeBegin: null,
        startTimeEnd: null
      },
      // 日期范围选择器
      dateRange: [],
      // 表格数据
      tableData: [],
      // 分页信息
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    // 页面创建时加载数据
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      // 构建搜索关键字
      let searchKeyword = '';
      if (this.searchForm.plateNumber) {
        searchKeyword = this.searchForm.plateNumber;
      }
      
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        param: searchKeyword
      }
      
      axios.post('/api/vehicle-server/record/fuzzyQuery', params)
        .then(response => {
          if (response.data.code === 200) {
            const data = response.data.data
            this.tableData = data.list
            this.pagination.total = data.total
          } else {
            this.$message.error(response.data.msg || '查询失败')
          }
        })
        .catch(error => {
          console.error('查询停车记录失败', error)
          this.$message.error('查询停车记录失败')
        })
    },
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
    },
    // 搜索记录
    searchRecords() {
      // 重置到第一页
      this.pagination.pageNum = 1
      this.loadData()
    },
    // 重置搜索条件
    resetSearch() {
      this.searchForm = {
        plateNumber: '',
        vehicleType: null,
        status: null,
        startTimeBegin: null,
        startTimeEnd: null
      }
      this.dateRange = []
      this.pagination.pageNum = 1
      this.loadData()
    },
    
    // 每页显示条数变化
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.loadData()
    },// 查看详情
    viewDetail(row) {
      this.$router.push({
        name: 'ParkingRecordDetail',
        query: { id: row.id }
      })
    },
  }
}
</script>

<style scoped>
.el-card {
  margin: 20px 0;
}
.search-form {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 